<template>
  <div id="customerDetailsHome" class="customerDetailsHome">
	  <group label-width="4.5em" label-margin-right="2em" label-align="left">
		  <cell class="customerDetailsCell" title="电话" value-align="left">
			  <span v-if="isWechat == true" v-html="phoneHtml"></span>
			  <span v-else @click="callCustomer" style="color: blue;">{{phone}}</span>
			  <!--<span><img slot="icon" style="width: 30px" src="@/assets/svg/icon_phone.svg" @click="callCustomer"></span>-->
		  </cell>
		  <cell class="customerDetailsCell" title="性别" :value="sex" value-align="left"></cell>
		  <cell class="customerDetailsCell" title="生日" :value="birthday" value-align="left"></cell>
		  <cell class="customerDetailsCell" title="老师" :value="teacher" value-align="left"></cell>
		  <cell class="customerDetailsCell" title="咨询" :value="consultant" value-align="left"></cell>
		  <cell class="customerDetailsCell" title="推荐人" :value="referrer" value-align="left"></cell>
	  </group>
	  <group v-if="hasTable == false && doShow == true">
		  <h3 style="text-align: center">宝贝还没有成长计划表!</h3>
		  <x-button :gradients="['#FF2719', '#FF61AD']" @click.native="createCustomerEx">+点击创建</x-button>
	  </group>
	  <group v-if="hasTable == true && doShow == true" label-width="4.5em" label-margin-right="2em" label-align="left">
		  <x-button :gradients="['#FF2719', '#FF61AD']" @click.native="showCustomerEx">{{customerExBtnText}}</x-button>
		  <form-preview v-if="isShowExDetails == true"
			              class="customerExTable"
		                header-label="成长计划表"
		                :body-items="list"
		                :footer-buttons="raiseUpBtn"
		                label-algin = "justify"
		                name="raiseUp"></form-preview>
	  </group>

	  <div v-transfer-dom>
		  <popup v-model="showPopup" height="270px" is-transparent>
			  <div style="width: 95%;background-color:#fff;margin:0 auto;padding-bottom: 5px">
				  <flexbox>
					  <flexbox-item>
						  <x-button class="flexBtn_confirm" @click.native="connected">打通了</x-button>
					  </flexbox-item>
					  <flexbox-item>
						  <x-button class="flexBtn_cancel" @click.native="unconnected">没打通</x-button>
					  </flexbox-item>
				  </flexbox>
			  </div>
		  </popup>
	  </div>

	  <div v-transfer-dom>
		  <popup v-model="showIfConnected" height="270px" is-transparent>
			  <div style="width: 95%;background-color:#fff;margin:0 auto;padding-bottom: 5px">
				  <group>
					  <x-textarea :max="200" :placeholder="hint"  v-model="detail" :height="50" ></x-textarea>
				  </group>
				  <flexbox>
					  <flexbox-item>
						  <x-button class="flexBtn_confirm" @click.native="confirm">提交</x-button>
					  </flexbox-item>
					  <flexbox-item>
						  <x-button class="flexBtn_cancel" @click.native="cancel">取消</x-button>
					  </flexbox-item>
				  </flexbox>
			  </div>
		  </popup>
	  </div>

  </div>
</template>

<script>
	import bus from '@/event/eventBus'
	import dateutils from '@/utils/date'
	import NetWorking from '../../../../utils/networking'
  import { Group, Cell, XButton, FormPreview, TransferDom, Popup, XTextarea, Flexbox, FlexboxItem, Confirm} from 'vux'
  export default {
    name: "customer-details-home",
    components: {
      Cell,
      Group,
	    XButton,
	    FormPreview,
	    TransferDom,
	    Popup,
	    XTextarea,
	    Flexbox,
	    FlexboxItem,
	    Confirm
    },
	  props: ['id'],
	  directives: {
		  TransferDom
	  },
	  data () {
		  return {
			  isWechat: false,
			  showIfConnected: false,
			  detail: '',
			  hint: '通话记录',
			  showPopup: false,
			  showConfirm: false,
			  confirmTitle: '电话接通了吗？',
			  name: '',
			  sex: '',
			  phone: '',
			  phoneHtml: '',
			  birthday: '',
			  teacher: '',
			  consultant: '',
			  referrer: '',
			  doShow: false,
			  hasTable: false,
			  isShowExDetails: false,
			  customerExBtnText: '查看学员成长计划',
			  customerPlanDetails: '',
			  list: [{
				  label: '需求',
				  value: '',
			  }, {
				  label: '兴趣',
				  value: ''
			  }, {
				  label: '性格',
				  value: ''
			  }, {
				  label: '教育决策',
				  value: ''
			  }, {
				  label: '家庭住址',
				  value: ''
			  }, {
				  label: '喜欢颜色',
				  value: ''
			  }, {
				  label: '是否剖腹产',
				  value: ''
			  }, {
				  label: '语言发育',
				  value: ''
			  }, {
				  label: '吐字清晰',
				  value: ''
			  }, {
				  label: '认生程度',
				  value: ''
			  }, {
				  label: '手部精细',
				  value: ''
			  }, {
				  label: '隔代代养',
				  value: ''
			  }, {
				  label: '哭闹表达需求',
				  value: ''
			  }, {
				  label: '哭多久妥协',
				  value: ''
			  }, {
				  label: '玩具多少种',
				  value: ''
			  }, {
				  label: '是否母乳',
				  value: ''
			  }, {
				  label: '是否游泳',
				  value: ''
			  }, {
				  label: '接触电子产品',
				  value: ''
			  }, {
				  label: '接触哪些',
				  value: ''
			  }, {
				  label: '接触频次',
				  value: ''
			  }, {
				  label: '是否绘本阅读',
				  value: ''
			  }, {
				  label: '阅读频次',
				  value: ''
			  }, {
				  label: '反应能力',
				  value: ''
			  }, {
				  label: '自信心',
				  value: ''
			  }, {
				  label: '抗挫能力',
				  value: ''
			  }],
			  raiseUpBtn: [{
				  style: 'primary',
				  text: '编辑',
				  onButtonClick: () => {
					  this.$router.push({ name: "updateCustomerExDetails", params: { id: this.id }})
				  }
			  }]
		  }
	  },
	  mounted: function () {
		  if(navigator.userAgent.match('MicroMessenger')){
			  this.isWechat = true
		  }

		  let _this = this
		  let url = 'ylyn/getCustomerDetailsById'

		  NetWorking.doGet(
			  url,
			  null,
			  {
				  params: {
					  customer_id: this.id
				  }
			  }
		  ).then(
			  response => {
				  let rs = response.data;
				  if(rs.error_code == 0){
					  _this.hasTable = true
					  _this.customerPlanDetails = rs.ylyn_details
				  }else if(rs.error_code == 22101){
					  _this.hasTable = false
				  }else{
					  alert(rs.error_message)
				  }
				  _this.doShow = true
			  }
		  )
	  },
    created: function () {
      let _this = this

	    var url = 'user_customer/getUserByCustomerIdWithRole'
	    var customerUrl = 'customers/' + this.id
	    var urlarr = new Array()
	    urlarr.push(
		    NetWorking.doGet(
			    url,
			    null,
			    {params: {id: this.id, role_name: 'teacher'}}
		    ))

	    urlarr.push(
		    NetWorking.doGet(
			    url,
			    null,
			    {params: {id: this.id, role_name: 'consultant'}}
		    ))

	    urlarr.push(
		    NetWorking.doGet(
			    customerUrl,
			    null,
			    null
		    ))

	    var callback = function (c1, c2, c3) {
		    let teacherList = c1.data.user_list
		    let consultantList = c2.data.user_list
		    let customer = c3.data.customer
		    for(var i=0; i<teacherList.length; i++){
			    _this.teacher += teacherList[i].nickname + ','
		    }
		    for(var i=0; i<consultantList.length; i++){
			    _this.consultant += consultantList[i].nickname + ','
		    }
		    _this.teacher = _this.teacher.substring(0, _this.teacher.length-1)
		    _this.consultant = _this.consultant.substring(0, _this.consultant.length-1)
		    if(customer.sex == 1){
		    	_this.sex = '男'
		    }else{
		    	_this.sex = '女'
		    }
		    _this.name = customer.name
		    _this.phone = customer.phone
		    _this.birthday = customer.birthday
		    _this.referrer = customer.referrer_obsolete

	    }

	    NetWorking.doAll2(urlarr).then(this.axios.spread(callback))
		    .catch(function (e){
			    console.log(2);
		    });
    },
	  watch: {
    	phone: function () {
		    this.phoneHtml = '<a style="text-decoration: none" href="tel:' + this.phone + '">' + this.phone + '</a>'
	    },
		  customerPlanDetails: function () {
			  this.list[0].value = this.customerPlanDetails.request
			  this.list[1].value = this.customerPlanDetails.interests
			  this.list[2].value = this.customerPlanDetails.kid_character
			  this.list[3].value = this.customerPlanDetails.decision_made
			  this.list[4].value = this.customerPlanDetails.address
			  this.list[5].value = this.customerPlanDetails.favorite_color
			  this.list[6].value = this.changeToYesNo(this.customerPlanDetails.is_cesarean)
			  this.list[7].value = this.customerPlanDetails.language
			  this.list[8].value = this.changeToYesNo(this.customerPlanDetails.is_clear_speak)
			  this.list[9].value = this.changeToYesNo(this.customerPlanDetails.is_shy)
			  this.list[10].value = this.customerPlanDetails.hand_details
			  this.list[11].value = this.changeToYesNo(this.customerPlanDetails.is_grand_raise)
			  this.list[12].value = this.changeToYesNo(this.customerPlanDetails.is_cry_for_request)
			  this.list[13].value = this.customerPlanDetails.compromise
			  this.list[14].value = this.customerPlanDetails.dolls_number
			  this.list[15].value = this.changeToYesNo(this.customerPlanDetails.is_breast_fed)
			  this.list[16].value = this.changeToYesNo(this.customerPlanDetails.is_swimming)
			  this.list[17].value = this.changeToYesNo(this.customerPlanDetails.is_touch_edevice)
			  this.list[18].value = this.customerPlanDetails.edevice_type
			  this.list[19].value = this.customerPlanDetails.edevice_frequency
			  this.list[20].value = this.changeToYesNo(this.customerPlanDetails.is_reading_book)
			  this.list[21].value = this.customerPlanDetails.reading_frequency
			  this.list[22].value = this.customerPlanDetails.reaction_ability
			  this.list[23].value = this.customerPlanDetails.confidence
			  this.list[24].value = this.customerPlanDetails.setback_resist
		  }
	  },
	  methods: {
		  onCancel () {
			  console.log('on cancel')
		  },
		  onConfirm (msg) {
			  this.logoutNow()
		  },
		  onHide () {
			  console.log('on hide')
		  },
		  onShow () {
			  console.log('on show')
		  },
		  callCustomer: function () {
			  if(this.isWechat){
				  this.showPopup = true
			  }else{
				  let _this = this
				  window.plugins.CallNumber.callNumber(function onSuccess(result){
						  setTimeout(function(){
							  _this.showPopup = true
						  }, 1000)
					  },
					  function onError(result) {
						  alert("Error:call number"+result)
					  },
					  _this.phone,true)
			  }
		  },
		  connected: function () {
			  this.showPopup = false
			  this.showIfConnected = true
		  },
		  unconnected: function () {
			  this.showPopup = false
			  //TODO
		  },
		  confirm: function () {
			  this.showIfConnected = false

			  let _this = this
			  NetWorking.doPost(
				  'customertrace',
				  null,
				  null,
				  {
					  params: {
						  content: this.detail ,
						  customerId: this.id
					  }
				  }
			  ).then(
				  response => {
					  let rs = response.data
					  if(rs.error_code == 0){
						  _this.newActivity()
					  }else{
						  alert(rs.error_message)
					  }
				  }
			  )
		  },
		  newActivity: function () {
		  	let _this = this
			  let curTime = dateutils.getYYMMDDHHmm(new Date())
			  NetWorking.doPost(
				  'activities/attachCallActivity',
				  null,
				  {
					  title: '电话',
					  content: this.detail,
					  time: curTime,
					  status: 2 //mark call status as 2 if we confirm we've called the customer
				  },
				  {
					  headers: {
						  'Content-Type': 'application/json;charset=utf-8',
						  'data': 'JSON.stringify(json)'
					  },
					  params: {
						  "employee_id": this.$store.state.user.userModel.sysUser.id,
						  "customer_id": this.id,
						  "rolePlay": 'consultant'
					  }
				  }
			  ).then(
				  response => {
					  let rs = response.data
					  if(rs.error_code == 0){
						  _this.detail = ''
						  _this.show   = false
						  bus.$emit("setIndex", 1)
					  }else{
						  alert(rs.error_message);
					  }
				  }
			  )
		  },
		  cancel: function () {
			  this.showIfConnected = false
		  },
		  createCustomerEx: function () {
			  this.$router.push({ name: "newCustomerExDetails", params: { id: this.id }})
		  },
		  showCustomerEx: function () {
			  this.isShowExDetails = !(this.isShowExDetails);
			  if(this.isShowExDetails == true){
				  this.customerExBtnText = '关闭学员成长计划'
			  }else{
				  this.customerExBtnText = '查看学员成长计划'
			  }
		  },
		  changeToYesNo(value){
			  if(value){
				  return '是'
			  }else{
				  return '否'
			  }
		  }
	  }
  }
</script>

<style>
	.customerDetailsCell{
		padding: 0px 15px !important;
	}

	.customerDetailsHome{
		margin-bottom: 100px;
	}
</style>
